<template>
  <div class="self-box">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/loginRedirect' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>员工管理</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :model="infoForm" :inline="true" class="info-form">
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="infoForm.userName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-input v-model="infoForm.gender" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth">
        <el-input v-model="infoForm.staffAge" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth">
        <el-input v-model="infoForm.userTel" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth">
        <el-input v-model="infoForm.staffAddress" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="薪资" :label-width="formLabelWidth">
        <el-input disabled autocomplete="off" v-model="infoForm.salary"></el-input>
      </el-form-item>
      <el-form-item label="入职" :label-width="formLabelWidth">
        <el-date-picker disabled autocomplete="off" v-model="infoForm.entryDate" type="datetime"
                        style="width:175%"></el-date-picker>
      </el-form-item>
      <el-form-item label="生日" :label-width="formLabelWidth">
        <el-date-picker type="datetime" align="right"
                        :picker-options="pickerOptions"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        autocomplete="off"
                        v-model="infoForm.staffDate"
                        style="width:175%"></el-date-picker>
      </el-form-item>
      <el-form-item label="职位" :label-width="formLabelWidth">
        <el-input disabled autocomplete="off" v-model="infoForm.role.roleName"></el-input>
      </el-form-item>
      <el-form-item label="部门" :label-width="formLabelWidth">
        <el-input disabled autocomplete="off" v-model="infoForm.dept.deptName"></el-input>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-input disabled autocomplete="off" v-model="infoForm.userStatus"></el-input>
      </el-form-item>
      <el-form-item label="账号" :label-width="formLabelWidth">
        <el-input disabled autocomplete="off" v-model="infoForm.account"></el-input>
      </el-form-item>
    </el-form>
    <div style="display: none">
      <input type="file" ref="upload" @change="uploadPic" />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetInfo()" type="warning">重 置</el-button>
      <el-button type="primary" @click="updateStaffInfo()" style="margin-left:100px">确 定 修 改</el-button>
      <el-button type="primary" @click="uploadResume()" style="margin-left:100px">上 传 个 人 头 像</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      infoForm: {},
      formLabelWidth: '120px',
      JobData: [],
      DeptData: [],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
    }
  },
  created() {
    this.getSelfInfo();
  },
  mounted() {
    this.$refs.upload.addEventListener('change', (e) => {

      let file = e.target.files[0];
      let formData = new FormData();
      formData.append("file", file);
      var userInfo = JSON.parse(window.sessionStorage.getItem("user"));
      var userId = (JSON.parse(userInfo).userId);
      this.$http.post('/user/upload' + userId, formData,
        {headers: {'Content-Type': 'multipart/form-data'}}).then((res) => {
        if (res.code == 200) {
          this.getSelfInfo();
          this.$message.success("上传成功!!!");
        } else {
          this.$message.error("上传失败!!!");
        }
      }).catch((err) => {
        this.$message.error(err.msg);
      }).finally(() => {
        this.$refs.upload.value = '';
      });

    }, false);
  },
  methods: {
    //获取个人信息
    getSelfInfo() {
      var userInfo = JSON.parse(window.sessionStorage.getItem("user"));
      var userId = (JSON.parse(userInfo).userId);
      this.$http.get("/user/get/" + userId).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.infoForm = res.data;
        }
      })
    },
    //重置
    resetInfo() {
      this.getSelfInfo();
      this.$message.success("重置个人信息成功!!!");
    },
    //修改
    updateStaffInfo() {
      this.$http.post('/user/update', this.infoForm).then((res) => {
        // console.log(res.code);
        if (res.code == 200) {
          this.getSelfInfo();
          this.$message.success("修改成功!!!");
        } else {
          this.$message.error("修改失败!!!");
        }
      }).catch((err) => {
        console.log(err)
        this.$message.error("修改失败!!!");
      });
    },
    // 上传简历
    uploadResume() {
      this.$refs.upload.click();
    },
    uploadPic(e){
      let file = e.target.files[0];
      let formData = new FormData();
      formData.append("file", file);
      var userInfo = JSON.parse(window.sessionStorage.getItem("user"));
      var userId = (JSON.parse(userInfo).userId);
      this.$http.post('/user/upload/' + userId, formData,
        {headers: {'Content-Type': 'multipart/form-data'}}).then((res) => {
        if (res.code == 200) {
          this.getSelfInfo();
          this.$message.success("上传成功!!!");
        } else {
          this.$message.error("上传失败!!!");
        }
      }).catch((err) => {
        this.$message.error(err.msg);
      }).finally(() => {
        this.$refs.upload.value = '';
      });
    }
  }
}
</script>

<style scoped>
.self-box .info-form {
  margin: 60px 0 0 10%;
}

.self-box .info-form .el-form-item {
  width: 40%;
}

.self-box .info-form .el-form-item .el-input {
  width: 200%;
}

.dialog-footer {
  margin-top: 20px;
  margin-left: 30%;
}

</style>
